import React from "react";
import { BrowserRouter, Routes, Route, useRoutes } from "react-router-dom";
import "./App.css";
import "antd/dist/reset.css";
import { routes } from "./router/routes";
// 方式三
// const App = () => {
//   const Router = () => useRoutes(routes);
//   return (
//     <BrowserRouter>
//       <Router></Router>
//     </BrowserRouter>
//   );
// };

// 方式二
const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        {routes.map((v, i) => {
          return (
            <Route path={v.path} element={v.element} key={i}>
              {v.children &&
                v.children
                  .reduce((p, n) => {
                    return n.children ? p.concat(n.children) : p.concat(n);
                  }, [])
                  .map((v, i) => {
                    return (
                      <Route path={v.path} element={v.element} key={i}></Route>
                    );
                  })}
            </Route>
          );
        })}
      </Routes>
    </BrowserRouter>
  );
};

// 方式一
// const App = () => {
//   return (
//     <BrowserRouter>
//       <Routes>
//         <Route path="/" element={<MainLayout></MainLayout>}>
//           <Route path="/" element={<Home></Home>}></Route>
//           <Route
//             path="/list/manage"
//             element={<ListManage></ListManage>}
//           ></Route>
//           <Route path="/list/add" element={<ListAdd></ListAdd>}></Route>
//           <Route path="/set" element={<Set></Set>}></Route>
//           <Route path="/upload" element={<Upload></Upload>}></Route>
//         </Route>
//       </Routes>
//     </BrowserRouter>
//   );
// };

export default App;
